<template>
  <div class="box-container">
    <div id="main" style="height: 100%;">
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { TreeChart } from 'echarts/charts';
echarts.use([TreeChart]);
import {orgChart} from '@/api/organization';


export default {
  data(){
    return{
      form:{}
    }
  },
  methods:{
    async orgMap(){
      const {data:res} = await orgChart()
      this.form = res.org
      this.drawChart()
    },
    drawChart(){
      let chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom, 'dark');
      let option;

      option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            id: 0,
            name: 'tree1',
            data: [this.form],
            top: '10%',
            left: '8%',
            bottom: '22%',
            right: '20%',
            symbolSize: 7,
            edgeShape: 'polyline',
            edgeForkPosition: '100%',
            initialTreeDepth: 3,
            lineStyle: {
              width: 2
            },
            label: {
              backgroundColor: '#100C2A',
              position: 'left',
              verticalAlign: 'middle',
              align: 'right'
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            emphasis: {
              focus: 'descendant'
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      };

      option && myChart.setOption(option);
    }
  },
  created() {
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      DatasetComponent,
      TransformComponent,
      BarChart,
      LabelLayout,
      UniversalTransition,
      CanvasRenderer
    ]);
    this.orgMap()
  },
  mounted() {
    this.drawChart()
  }
}
</script>

<style scoped>
.box-container{
  position:absolute;
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}
</style>
